Pré-requisitos: Documentação de Especificação
Visão geral da interação do usuário pelas telas do sistema e protótipo interativo das telas com as funcionalidades que fazem parte do sistema (wireframes).
Desenvolvemos a logo do aplicativo pensando em cores que transmitam respeito e confiança, por isso a escolha de um roxo como cor principal e de um azul como cor secundária. A paleta de cores foi escolhida a partir do roxo principal, de modo a ter um resultado harmônico e coerente. Para conferir a acessibilidade dessa paleta, foi utilizada a ferramenta de conferência de contraste Adobe, bem como para acessibilidade para daltônicos. Desse modo, garante-se a inclusão e uma boa experiência para qualquer usuário.
Para os diagramas de fluxo, foram desenvolvidos wireframes, conforme pode ser conferido na próxima seção. Também foram desenhados mock-ups no Figma. É possível conferir no Figma:
Para registro dos mock-ups, temos:
O diagrama apresenta o estudo do fluxo de interação do usuário com o sistema interativo, permitindo que o design das interações seja bem planejado e gere impacto na qualidade no design do wireframe interativo que será desenvolvido logo em seguida.
O fluxo web foi pensado para ser o mais intuitivo possível para pessoas que já utilizam ou não a plataforma.
O fluxo do aplicativo igualmente foi desenhado para ser intuitivo. Assim, atende-se aos requisitos não só do público-alvo, mas também de outros possíveis públicos, como idosos.